<!--
 * @Author: 郭招娣 10615594+guo-zhaodi@user.noreply.gitee.com
 * @Date: 2022-09-13 18:49:42
 * @LastEditors: 郭招娣 10615594+guo-zhaodi@user.noreply.gitee.com
 * @LastEditTime: 2022-09-20 09:46:41
 * @FilePath: \郭招娣\app\src\views\Comment.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <div>
    <el-card class="title-card" shadow="always">
      <div class="card-item">
        <p style="width: 25%">
          URL:<el-input
            v-model="formInline.url"
            placeholder="请输入文章标题"
            style="width: 200px"
          />
        </p>
        <p style="width: 25%">
          IP:<el-input
            v-model="formInline.ip"
            placeholder="请输入文章标题"
            style="width: 200px"
          />
        </p>
        <p style="width: 25%">
          浏览器:<el-input
            v-model="formInline.ie"
            placeholder="请输入文章标题"
            style="width: 200px"
          />
        </p>
        <p style="width: 25%">
          内核:<el-input
            v-model="formInline.kernel"
            placeholder="请输入文章标题"
            style="width: 200px"
          />
        </p>
        <p style="width: 25%">
          OS:<el-input
            v-model="formInline.operation"
            placeholder="请输入文章标题"
            style="width: 200px"
          />
        </p>
        <p style="width: 25%">
          地址:<el-input
            v-model="formInline.address"
            placeholder="请输入文章标题"
            style="width: 200px"
          />
        </p>
        <p style="width: 25%">
          浏览量:<el-input
            v-model="formInline.num"
            placeholder="请输入文章标题"
            style="width: 200px"
          />
        </p>
        <p style="width: 25%">
          日期:<el-input
            v-model="formInline.date"
            placeholder="请输入文章标题"
            style="width: 200px"
          />
        </p>
      </div>
      <div class="btns">
        <el-button type="primary" @click="searchChange">搜索</el-button>
        <el-button>重置</el-button>
      </div>
    </el-card>
    <el-card class="box-card">
      <!--按钮组 -->
      <div v-if="multipleSelection.length">
        <el-popconfirm
          confirm-button-text="确定"
          cancel-button-text="取消"
          :icon="InfoFilled"
          icon-color="orange"
          title="确认删除这个文章？"
          @confirm="chooseDeleteArticleLists"
        >
          <template #reference>
            <el-button plain type="danger">删除</el-button>
          </template>
        </el-popconfirm>
      </div>

      <el-table
        :data="tableData"
        style="width: 100%"
        @selection-change="handleSelectionChange"
      >
        <el-table-column type="selection" width="55" />
        <el-table-column fixed prop="url" label="URL" width="150"  height='20'/>

        <el-table-column  prop="ip" label="IP" width="150"/>

        <el-table-column  prop="ie" label="浏览器" width="180" />

        <el-table-column  prop="kernel" label="内核" width="130" />

        <el-table-column  prop="operation" label="操作系统" width="130" />

        <el-table-column  prop="address" label="地址" width="190" />

        <el-table-column  prop="num" label="访问量" width="130" />

        <el-table-column  prop="date" label="日期" width="130" />
      
      
        <el-table-column fixed="right" label="操作" width="250">
          <template #default="scope">
          
            <el-popconfirm
              confirm-button-text="确定"
              cancel-button-text="取消"
              :icon="InfoFilled"
              icon-color="orange"
              title="确认删除这个文章？"
              @confirm="handleDelete(scope.row)"
            >
              <template #reference>
                <el-button link size="small" type="danger">删除</el-button>
              </template>
            </el-popconfirm>
          </template>
        </el-table-column>
      </el-table>
        
      <el-pagination
        style="
          display: flex;
          align-items: center;
          justify-content: flex-end;
          margin-top: 10px;
        "
        small
        background
        :page-size="pageSize"
        :page-sizes="[1, 2, 3, 4]"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </el-card>
  </div>
</template>

<script>
import { ElMessage, InfoFilled } from "element-plus";

import { mapMutations } from "vuex";
// 获取后端数据
import {
  asyncAccessLists,
  asyncDeleteAccessLists,
  asyncChooseDeleteAccessLists,
} from "../api/access";
import { RefreshLeft } from "@element-plus/icons-vue";
export default {
  components: {
    RefreshLeft,
  },
  data() {
    return {
      // 面包屑
      breadList: [],
      // 多选数组
      multipleSelection: [],
      //   文章数据
      tableData: [],
      isHidden: false,
      formInline: {
        url: "",
        ip: "",
        ie: "",
        ip: "",
        kernel: "",
        operation: "",
        address: "",
        num: "",
        date: "",
      },
      // 新建还是添加
      pageCode: 1,
      pageSize: 4,
      total: 0,
    };
  },
  created() {
    this.init();
    this.getAccessLists();
  },
  methods: {
    ...mapMutations({
      getBreadList: "getBreadList",
      getWorkbench: "getWorkbench",
    }),
    // 初始化页面
    init() {
      this.getBreadList({ breadList: this.$route.meta.breadList });
      this.getWorkbench({ workbench: false });
    },
    // 请求数据方法
    async getAccessLists() {
      const res = await asyncAccessLists("/accessLists", {
        pageCode: this.pageCode,
        pageSize: this.pageSize,
        url: this.formInline.url,
        ip: this.formInline.ip,
        ie: this.formInline.ie,
        kernel: this.formInline.kernel,
        operation: this.formInline.operation,
        num: this.formInline.num,
        date: this.formInline.date,
      });
      console.log(res);
      this.tableData = res.data.results;
      this.total = res.data.total;
    },
    // 删除
    async handleDelete(row) {
      const res = await asyncDeleteAccessLists("/deleteAccessLists", {
        id: row.id,
      });
      this.getAccessLists();
      if (res.data.code === 200) {
        this.initClassLists();
        ElMessage({
          message: "删除成功",
          type: "success",
        });
      }
    },
    // 选中
    handleSelectionChange(val) {
      // 多选删除
      this.multipleSelection = val;
    },
    // 多选删除
    async chooseDeleteArticleLists() {
      const res = await asyncChooseDeleteAccessLists("/accessDelete", {
        multipleSelection: this.multipleSelection,
        pageCode: this.pageCode,
        pageSize: this.pageSize,
      });
      this.getAccessLists();
    },
    // 发布
    async publish() {
      const res = await asyncPublish("/publish", {
        multipleSelection: this.multipleSelection,
      });
      if (res.data.code === 200) {
        this.getAccessLists();
        ElMessage({
          message: "操作成功",
          type: "success",
        });
      }
    },
    // 草稿
    async Draft() {
      const res = await asyncDraft("/draft", {
        multipleSelection: this.multipleSelection,
      });
      if (res.data.code === 200) {
        this.getAccessLists();
        ElMessage({
          message: "操作成功",
          type: "success",
        });
      }
    },
    searchChange() {
      this.getAccessLists();
    },
    // 分页
    handleSizeChange(val) {
      console.log(val, "44");
      this.pageSize = val;
      this.getAccessLists();
    },
    handleCurrentChange(val) {
      this.pageCode = val;
      console.log(val);
      this.getAccessLists();
    },
  },
};
</script>
<style>
.title-card,
.box-card {
  margin-top: 20px;
}
.card-item {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  justify-content: space-between;
}
.btns {
  margin-top: 20px;
  display: flex;
  justify-content: flex-end;
}
</style>